<template>
	<div id="addBusinessPage">
		<div style="padding: 15px;text-align: left;">
			<el-button type="primary"  @click="changeState">添加商户</el-button>
			<el-button type="primary">
				<router-link to="/merchantMange/addMerchant">返回通道管理</router-link>
			</el-button>
			<el-button type="primary" @click="back">返回商户组管理</el-button>

			<span style="margin-left: 40px; color: red;font-weight: bold;">商户组名：</span>
			<el-input style="width: 120px;" readonly v-model="channleName"></el-input>

			<el-dialog title="保存商户" :visible.sync="dialogFormVisible" size="tiny">
				<el-form>
					<el-form-item label="商户名" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.name" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="商户号" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.account" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="密匙" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.secretKey" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="开始金额" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.beginMoney" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="结束金额" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.endMoney" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio class="radio" v-model="businessInfo.status" label="1">启用</el-radio>
            <el-radio class="radio" v-model="businessInfo.status" label="2">停用</el-radio>

					</el-form-item>
          <el-form-item label="银行卡" :label-width="formLabelWidth">
            <el-select v-model="businessInfo.businessCardId" placeholder="请选择" >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.cardNo + '/' +item.cardPerson"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="businessInfo.remark" auto-complete="off"></el-input>
          </el-form-item>
					<el-form-item label="backup1" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.backup1" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="backup2" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.backup2" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="backup3" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.backup3" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="backup4" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.backup4" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="backup5" :label-width="formLabelWidth">
						<el-input v-model="businessInfo.backup5" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="text-align: center;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addBusiness">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<el-table :data="businessList" border style="width: 100%" v-loading="loading1">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="name" label="商户名">
			</el-table-column>
			<el-table-column prop="beginMoney" label="开始金额">
			</el-table-column>
			<el-table-column prop="endMoney" label="结束金额">
			</el-table-column>
			<el-table-column label="商户开关">
				<template slot-scope="scope">
					<el-button type="primary" size='small' :disabled="scope.row.status==1?true:false" @click="businessStart(scope.row.id)">开启</el-button>
					<el-button type="primary" size="small" :disabled="scope.row.status==2?true:false" @click="businessStop(scope.row.id)">停止</el-button>
				</template>

			</el-table-column>
			<el-table-column label="商户管理">
				<template slot-scope="scope">

					<el-button type="text" @click="changeState2(scope.row)">修改</el-button>

				</template>

			</el-table-column>

		</el-table>
		<div class="block" style="text-align: right;padding-top: 15px;">

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		data () {
			return {
				dialogFormVisible: false,
				dialogFormVisible2: false,
				businessList: [],
				loading1: false,
				formLabelWidth: '100px',
				businessName: '',
				channleName: '',
				pageSize: 10,
				pageNumber: 1,
				title:"添加商户",
				total: 1,
        options:[],
				businessInfo: {
					secretKey: '',
					account: '',
					status: '',
					beginMoney: '',
					endMoney: '',
					groupId: '',
					name: '',
          businessCardId:'',
          remark:'',
					backup1: '',
					backup2: '',
					backup3: '',
					backup4: '',
					backup5: ''
				},


			}
		},
		created() {

			this.getBusinessList();
			this.channleName = this.$route.query.groupName;
      this.getBusinessCardList()
		},
		methods: {
			getBusinessList() {
				this.loading1 = true;
				let _this = this;
				this.$api.getBusinessList(this.$route.query.groupId, {
					pageSize: this.pageSize,
					pageNumber: this.pageNumber
				}).then(res => {
					if(res.code == '000000') {
						_this.loading1 = false;
						_this.businessList = res.data.list;
						_this.total = res.data.totalRow;
						console.log(res.data)
					}
				})
			},
      getBusinessCardList(){
			  this.$api.getBusinessCardList(this.$route.query.groupId).then(res=>{
          this.$message.success("获取商户银行卡列表成功");
          this.options = res.data;
        })

      },
			back(){
				this.$router.go(-1)
			},
			changeState(){
				this.dialogFormVisible=true;
				 this.clearParams(this.businessInfo);
				 this.businessInfo.status  = '2'
        sessionStorage.setItem("business id", '')
			},
			addBusiness() {
			  let id = sessionStorage.getItem('business id')
			  if(id){
			    this.businessInfo.id = id
        }else{
			    if(this.businessInfo.id){
			      console.log(this.businessInfo.id)
			      delete this.businessInfo.id
          }
        }
				let _this = this;
        this.businessInfo.groupId = this.$route.query.groupId;

				this.$api.saveBusiness(this.businessInfo).then(res => {
					if(res.code == '000000') {
						console.log(res.data);
						_this.dialogFormVisible = false;
						_this.getBusinessList();
						_this.$message({
							type: 'success',
							message: "商户保存成功"
						});
					}
				})
			},
			changeState2(row){
			  for(let i in row){
			    for(let j in this.businessInfo){
			       if(i == j){
			         this.businessInfo[j] = row[i]
             }
          }
        }
				this.dialogFormVisible=true;
        this.businessInfo.status += ''
        sessionStorage.setItem("business id",row.id)
			},
			businessStart(id) {
				let _this = this;
				this.$api.getBusinessStart(id).then(res => {
					if(res.code == '000000') {
						_this.$message({
							type: 'success',
							message: "商户开启成功"

						});
							_this.getBusinessList();
					}
				})
			},
			businessStop(id) {
				let _this = this;
				this.$api.getBusinessStop(id).then(res => {
					if(res.code == '000000') {
						_this.$message({
							type: 'success',
							message: "商户停止成功"
						});
						_this.getBusinessList();
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pageNumber = val;
				this.getBusinessList()
			},
			clearParams(obj) {
				for(let item in obj) {
					obj[item] = ''
				}
			}

		}
	}
</script>

<style lang="less">
	.cell {
		text-align: center;
	}
</style>
